<script lang="ts">
    import type { RateItemProps } from "./Rate";

    const props: RateItemProps = $props();

    const className = $derived.by(() => {
        let half = false;
        let full = false;
        if (props.index <= props.current - 1) {
            full = true;
        }
        if (props.index > props.current - 1 && props.index < props.current) {
            half = true;
        }
        return {
            "cm-rate-star": true,
            "cm-rate-star-zero": !full && !half,
            "cm-rate-star-half": props.allowHalf && half,
            "cm-rate-star-full": full,
        };
    });
</script>

<div class={className}>
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <span class="cm-rate-icon" onmouseenter={props.onMouseEnter?.bind(null, props.index + 1)} onclick={props.onClickStar?.bind(null, props.index + 1)}>
        {@render props.icon?.()}
    </span>
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    {#if props.allowHalf}
        <!-- svelte-ignore a11y_click_events_have_key_events -->
        <span class="cm-rate-star-content" onmouseenter={props.onMouseEnterHalf?.bind(null, props.index + 0.5)} onclick={props.onClickHalfStar?.bind(null, props.index + 0.5)}>
            {@render props.icon?.()}
        </span>
    {/if}
</div>
